<template>
  <view class="step-wrapper">
    <view class="step-item" v-for="(item, index) in stepList" :key="index">
      <view class="circle" :class="{'actived': index === value}" v-if="index < value">
        <u-icon name="checkbox-mark" color="#2488F5"></u-icon>
      </view>
      <view class="circle" :class="{'actived': index === value}" v-else>
        {{index + 1}}
      </view>
      <view class="dot" :class="{'actived': index === value -1}">
        <view class="i-dot"></view>
        <view class="i-dot"></view>
        <view class="i-dot"></view>
        <view class="i-dot"></view>
      </view>
      <view class="text" :class="{'actived': index === value}" :style="[textStyle]">{{item.text}}</view>
    </view>
  </view>

</template>

<script>
  export default {
    props: {
      value: {
        required: true,
        type: Number,
        default: 0
      },
      stepList: {
        required: true,
        type: Array,
        default: () => ([])
      },
      textStyle: {
        type: Object,
        default () {
          return {}
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  .step-wrapper {
    width: 100%;
    display: flex;

    .step-item {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      position: relative;

      .dot {
        position: absolute;
        top: 23rpx;
        right: -32rpx;
        display: flex;
        opacity: 0.6;

        .i-dot {
          width: 10rpx;
          height: 10rpx;
          background: #FFFFFF;
          margin-right: 8rpx;
          border-radius: 50%;
        }
      }

      .actived {
        opacity: 1 !important;
      }

      &:last-of-type {
        .dot {
          display: none;
        }
      }

      .circle {
        width: 56rpx;
        height: 56rpx;
        background: #FFFFFF;
        margin-bottom: 19rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 32rpx;
        color: #2488F5;
        opacity: 0.6;
      }

      .text {
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        opacity: 0.6;
        text-align: center;
      }
    }
  }
</style>